<template>
  <div class="pay-order">
    <div class="order-block">
      <div class="order-title">
        订单详情
        <!-- 这里加一个订单倒计时 -->
        <div class="count-down">
          距离订单失效还有:
          <span id="min">00</span>
          :
          <span id="sec">00</span>
        </div>
      </div>
      <div class="order-info">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="订单号">
            {{ orderInfo.orderId }}
          </el-descriptions-item>

          <el-descriptions-item label="产品名">
            {{ orderInfo.goodName }}
          </el-descriptions-item>

          <el-descriptions-item label="产品价格">
            {{ orderInfo.seckillPrice }}元
          </el-descriptions-item>

          <el-descriptions-item label="产品状态">
            <el-tag>未支付</el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="创建时间">
            {{ orderInfo.create_time | dateFormat("yyyy-mm-dd hh:mm:ss") }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <div class="pay-way">
      <div class="pay-way-title">支付方式</div>
      <div class="pay-way-img-block">
        <button class="pay-way-btn" @click="selectPayWay(0)">
          <img
            :src="require('@/assets/Alipay.png')"
            class="pay-way-img"
            title="支付宝支付"
          />
        </button>

        <!-- 这里没有对接银行的API接口，需要后期自行对接 -->
        <button class="pay-way-btn" @click="selectPayWay(1)">
          <img
            :src="require('@/assets/ChinaBankPay.png')"
            class="pay-way-img"
            title="中国银行支付"
          />
        </button>

        <!-- 自主添加其它的支付方式 -->
      </div>
    </div>

    <div class="pay-btn">
      <el-button
        v-show="new Date() - new Date(this.orderInfo.create_time) <= 1800000"
        class="go-pay"
        type="warning"
        @click="payOrderBtn()"
        >支 付</el-button
      >
      <el-button
        v-show="new Date() - new Date(this.orderInfo.create_time) > 1800000"
        class="go-pay"
        type="warning"
        disabled
        >超时订单</el-button
      >
    </div>
  </div>
</template>

<script>
import { getOrder, orderPay } from "@/api/order";

export default {
  name: "PayOrder",
  data() {
    return {
      orderInfo: {},
      startInterval: null,
    };
  },

  created() {
    this.getOrderInfo(this.$route.params.orderId);
  },

  mounted() {
    // 禁止浏览器回退
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", function () {
        history.pushState(null, null, document.URL);
      });
    }
  },

  methods: {
    selectPayWay(val) {
      let btn = document.getElementsByClassName("pay-way-btn");
      for (let i = 0; i < btn.length; i++) {
        btn[i].style.border = "none";
      }
      btn[val].style.border = "1px solid #409eff";
    },

    getOrderInfo(orderId) {
      getOrder(orderId).then((res) => {
        this.orderInfo = res.data;
        document.getElementsByClassName("pay-way-btn")[0].style.border =
          "1px solid #409eff";
        if (new Date() - new Date(this.orderInfo.create_time) <= 1800000) {
          this.startInterval = setInterval(this.countDown, 1000);
        }
      });
    },

    payOrderBtn() {
      let btn = document.getElementsByClassName("pay-way-btn");
      if (btn[0].style.border === "none") {
        this.$message.error("暂未开放该通道，请选择支付宝支付");
        return false;
      }

      orderPay(this.orderInfo.orderId).then((res) => {
        if (this.startInterval !== null) clearInterval(this.startInterval);
        document.querySelector("body").innerHTML = res;
        document.forms[0].submit();
      });
    },

    countDown() {
      let count = 1800000 - (Date.now() - new Date(this.orderInfo.create_time));
      let min = parseInt((count % (1000 * 60 * 60)) / (1000 * 60));
      let sec = parseInt((count % (1000 * 60)) / 1000);

      if (min < 10) min = "0" + min;
      if (sec < 10) sec = "0" + sec;
      document.getElementById("min").innerHTML = min;
      document.getElementById("sec").innerHTML = sec;

      if (new Date() - new Date(this.orderInfo.create_time) > 1800000) {
        clearInterval(this.startInterval);
        this.countDownFinish();
      }
    },

    countDownFinish() {
      this.getOrderInfo(this.$route.params.orderId);
    },
  },

  filters: {
    dateFormat: function (val, args) {
      var time = new Date(val);
      var year = time.getFullYear();
      var month = time.getMonth() + 1;
      var day = time.getDate();

      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;

      if (args.toLowerCase() === "yyyy-mm-dd") {
        return year + "年" + month + "月" + day + "日";
      } else {
        var hour = time.getHours();
        var min = time.getMinutes();
        var sec = time.getSeconds();

        if (hour < 10) hour = "0" + hour;
        if (min < 10) min = "0" + min;
        if (sec < 10) sec = "0" + sec;

        return (
          year +
          "年" +
          month +
          "月" +
          day +
          "日" +
          " " +
          hour +
          ":" +
          min +
          ":" +
          sec
        );
      }
    },
  },
};
</script>

<style>
.pay-order {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-height: 100vh;
  font-size: 18px;
  position: fixed;
}

.order-title,
.pay-way-title {
  height: 35px;
  width: 100%;
  background: #409eff;
  color: white;
  font-size: 1.2em;
  font-weight: bold;
  padding-top: 6px;
  padding-left: 10px;
  line-height: 30px;
}

.count-down {
  display: block;
  float: right;
  margin-right: 3%;
}

.order-info {
  height: 280px;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 2%;
}

.el-descriptions_body {
  width: 70%;
}

.pay-way-img-block {
  height: 90px;
  border-bottom: 1px solid #ebeef5;
  width: 100%;
}

.pay-way-btn {
  margin-top: 15px;
  margin-left: 25px;
  border: none;
  background: white;
}

.pay-way-btn:hover {
  border: 1px solid #409eff !important;
  cursor: pointer;
}

.pay-way-img {
  height: 60px;
  width: 200px;
}

.pay-btn {
  width: 100%;
  height: 45px;
  position: fixed;
  left: 0;
  bottom: 0;
  background: #409eff;
}

.go-pay {
  display: block;
  float: right;
  height: 45px;
  width: 130px;
  font-size: 1em;
  line-height: 1.1em;
}
</style>